<template>
  <div>
    <!-- 全局知识详情弹窗组件 -->
    <el-drawer
      v-if="$store.state.knowledgeDetailVisible"
      :modal="false"
      :size="CONST.WORKSPACE_WIDTH + 'px'"
      :visible.sync="$store.state.knowledgeDetailVisible"
      direction="rtl"
      title="知识详情">
      <KnowledgeDetail :knowledgeId="$store.state.knowledgeDetailId"
                       :knowledgeStatus="$store.state.knowledgeDetailStatus"/>
    </el-drawer>

    <!-- 全局图书文章弹窗 -->
    <el-drawer
      :title="bookArticle.title"
      size="50%"
      :modal="false"
      :visible.sync="$store.state.bookArticleDrawerVisible"
      @opened="scrollToCrtCatalog">
      <el-row>
        <el-button style="margin-left: 10px; " size="small" type="primary" @click="getPreSibling">上一篇</el-button>
        <el-button size="small" type="primary" @click="getNextSibling">下一篇</el-button>
      </el-row>
      <div id="bookArticleContent" :style='{margin: "10px", backgroundColor : "aliceblue", height: (CONST.WORKSPACE_HEIGHT - 50) + "px", overflow: "auto"}'
           v-html="bookArticle.unitContent"></div>
    </el-drawer>

    <!-- 全局图书元数据弹窗 -->
    <el-drawer v-if="$store.state.bookMetadataDrawerVisible"
      :title="$store.state.book.name"
      size="70%"
      :visible.sync="$store.state.bookMetadataDrawerVisible">
      <BookMetadata/>
    </el-drawer>

    <!-- 全局试题详情弹窗 -->
    <el-drawer v-if="$store.state.exerciseGroupDrawerVisible"
      title="试题详情"
      size="70%"
      :visible.sync="$store.state.exerciseGroupDrawerVisible">
      <PreviewExerciseGroup/>
    </el-drawer>
  </div>
</template>

<script>
import KnowledgeDetail from './KnowledgeDetail/KnowledgeDetail'
import {mapState} from "vuex";
import BookMetadata from "./common/BookMetadata";
import PreviewExerciseGroup from "./exerciseBook/PreviewExerciseGroup";
export default {
  name: "PublicComp",
  components: {
    PreviewExerciseGroup,
    BookMetadata,
    KnowledgeDetail,
  },
  computed: {
    ...mapState(['bookArticle'])
  },
  data() {
    return {}
  },
  methods: {
    getPreSibling() {
      this.axios.get('/pmph/action/book/selectPreSibling', {
        params: {
          bookId: this.bookArticle.bookId,
          bookArticleId: this.bookArticle.id
        }
      }).then((resp) => {
        this.$store.commit('setBookArticle', resp.data)
      })
    },
    getNextSibling() {
      this.axios.get('/pmph/action/book/selectNextSibling', {
        params: {
          bookId: this.bookArticle.bookId,
          bookArticleId: this.bookArticle.id
        }
      }).then((resp) => {
        this.$store.commit('setBookArticle', resp.data)
      })
    },
    scrollToCrtCatalog() {
      if (this.bookArticle.crtBookCatalogItemTagId) {
        let crtTag = document.getElementById(this.bookArticle.crtBookCatalogItemTagId);
        $(crtTag).css('color', 'red')
        let scrollTop = crtTag.offsetTop - 140
        document.getElementById("bookArticleContent").scrollTop = scrollTop
      }
    },
  }
}
</script>

<style scoped>
</style>
